<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

    <!-- <div id="ap"> -->
        <!--当data里面定义的isActive等于true时，is-active这个类才会被添加起作用-->
        <!--当data里面定义的hasError等于true时，text-danger这个类才会被添加起作用-->
        <!-- <div :class="{'is-active':isActive, 'text-danger':hasError}" >
        </div>
    </div> -->

    <!-- <div id="app"> -->
        <!--数组语法：errorClass在data对应的类一定会添加-->
        <!--is-active是对象语法，根据activeClass对应的取值决定是否添加-->
        <!-- <div :class="[{'is-active':isActive,hasError}]"></div>
    </div> -->

    <div id="app">
        <!--在vue实例的data中定义了classObject对象，这个对象里面是所有类名及其真值-->
        <!--当里面的类的值是true时会被渲染-->
        <div :class="classObject"></div>
    </div>

    <!-- 当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。 -->
</body>
<script>
// v-bind用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。
// 常用于动态绑定class和style。以及href等。简写为一个冒号:

//对象语法
    // var app =new Vue({
    //     el:'#ap',
    //     data: {
    //         isActive:true,
    //         hasError:false
    //     }
    // })
    // 渲染结果
    // 因为hasError: false，所以text-danger不被渲染
    // <div class = "is-active"></div>

//数组语法
    // var app =new Vue({
    //     el:'#app',
    //     data:{
    //         isActive:false,
    //         hasError:'text-danger'
    //     }
    // })
    // 渲染结果
    // 因为activeClass: false，所以is-active不被渲染
    // <p class = "text-danger"></p>

// 直接绑定数据对象
    var app =new Vue({
        el:'#app',
        data:{
            classObject:{
                'is-active':false,
                'text-danger':true
            }
        }        
    })
    // 渲染结果
    // 因为'is-active': false，所以is-active不被渲染
    //<div class = "text-danger"></div>



</script>
</html>